<template>
    <div class="form-manage">
        <!--Sinput-->
        <div id="input" @click="showFormManage">
            <cube-input
                    v-model="text_value"
                    placeholder="请选择插入的表单"
            >
                <template v-slot:append v-if="value !== ''">
                    <div class="remove"
                         @click.stop="$emit('confirm','')">
                        <i class="iconfont icon-guanbi"></i>
                    </div>
                </template>
            </cube-input>
        </div>
        <!--Einput-->
    </div>
</template>

<script>
export default {
    name: "form-manage",
    data() {
        return {
            text_value: ''
        }
    },
    model: {
        prop: 'value',
        event: 'confirm'
    },
    props: {
        value: {
            type: String,
            default: ''
        }
    },
    watch: {
        value() {
            if(this.value !== '') {
                this.setTextValue()
            } else {
                this.text_value = ''
            }
        }
    },
    mounted() {
        if(this.value !== '') {
            this.setTextValue()
        }
    },
    methods: {
        /**
         * 显示表单选择组件
         */
        showFormManage() {
            this.$createFormManage({
                is_show: new Date().getTime(),
                select: true,
                onConfirm: (res) => {
                    this.$emit("confirm",res)
                }
            })
        },
        /**
         * 设置input显示的文字
         */
        setTextValue(){
            this.$get("form/get",{
                form_id: this.value
            })
                .then((res) => {
                    if(res.data.code === 0) {
                        this.text_value = res.data.data.form_name
                    }
                })
        }
    }
}
</script>

<style scoped lang="less">
#input{
        position: relative;
    }
#input::before{
    position: absolute;
    top:0;
    left:0;
    z-index:100;
    content:"";
    display: block;
    background:rgba(0,0,0,0);
    width: 100%;
    height: 100%;
}
</style>